<template>
    <div class="hospital">
        <div class="list" style="padding-top:10px;">
            <!-- 新增按钮 -->
            <el-button @click="addHandler" type="primary" round>新增</el-button>

            <!-- 表格 -->
            <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="name"
            label="医院名称">
        </el-table-column>
        <el-table-column
            prop="introduce"
            label="医院简介">
        </el-table-column>
        <el-table-column
            prop="address"
            label="医院地址">
        </el-table-column>
        <el-table-column
            prop="flags"
            label="标记">
        </el-table-column>
        <el-table-column
            prop="longitude"
            label="经度">
        </el-table-column>
        <el-table-column
            prop="latitude"
            label="纬度">
        </el-table-column>
        <el-table-column
            label="操作">
            <template v-slot='scope'>
                <el-tag @click="toDelete(scope.row)">删除 </el-tag>
                <el-tag type="warning" @click="toEdit(scope.row)"> 修改</el-tag>
            </template>
        </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total=total
            :page-size='params.pageSize'
            @current-change='pageChange'>
        </el-pagination>

         <!-- 模态框 -->
        <el-dialog title="录入医院信息" :visible.sync="dialogFormVisible" width="80%">
        <el-form>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth">
                <el-input v-model="form.introduce" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="省市" :label-width="formLabelWidth">
               <el-cascader
                    v-model="form.pca"
                    :options="pca"
                    :props="{value:'name',label:'name',  expandTrigger: 'hover' }"
                    >
                </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标记" :label-width="formLabelWidth">
                <el-input v-model="form.flags" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经度" :label-width="formLabelWidth">
                <el-input v-model="form.longitude" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="纬度" :label-width="formLabelWidth">
                <el-input v-model="form.latitude" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="tableAdd">确 定</el-button>
        </div>
        </el-dialog>


        </div>
    </div>
</template>

<script>
import axios from '@/http/axios'
import pca from '@/assets/pca.json'
import qs from 'qs'
export default {
    data(){
        return{
            params:{
                page:1,
                pageSize:10
            },
            tableData:[],
            total:0,
            categories:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false,
            pca
        }
    },
    created(){
        this.queryPage();
    },
    // 监听
    watch:{
        params:{
            handler:function(){
                this.queryPage()
            },
            deep:true
        }
    },
    methods:{
        // 修改
        toEdit(item){
            // 显示模态框
            this.dialogFormVisible=true;
            this.form = JSON.parse(JSON.stringify(item));
            this.form.pca = [];
            this.form.pca.push(item.province,item.city,item.area);          
        },
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // 封装参数
                let obj = {
                    id:item.id
                }
                axios({
                    url:'http://121.199.29.84:8001/hospital/deleteById',
                    method:'get',
                    params:obj
                }).then((res)=>{
                    // console.log(res.data);
                    // this.findAllNews();
                    this.queryPage();
                })
                this.$notify({
                    title: '成功',
                    message:'删除成功',
                    type: 'success'
                    
                })
                
                }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                })          
            });
        },
        // 模态框
        addHandler(){
            this.dialogFormVisible=true;
            this.form = {};
        },
        // 页码改变
        pageChange(page){
            console.log(page);2
            this.params.page = page;
        },

        // 查询
        queryPage(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                this.total = res.data.data.total;
                // console.log(res);
                this.tableData = res.data.data.list;
                // console.log(res.data.data.list[0]);
            })
        },

        // 新增
        tableAdd(){
            this.form.province = this.form.pca[0];
            this.form.city = this.form.pca[1];
            this.form.area = this.form.pca[2];
            delete this.form.pca;

            axios({
                url:'http://121.199.29.84:8001/hospital/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                console.log(res);
                this.queryPage();
            })
            this.dialogFormVisible = false;
        }
    }
}
</script>